<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>客户资源管理网站后台</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		.cms_login {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			background-repeat: no-repeat;
			background-image: url(img/banner.jpg);
			background-size: 100% 100%;
		}

		.flexCenter {
			text-align: center;
			margin: auto;
		}

		.cms_login_container {
			width: 70%;
			height: 70%;
			display: flex;
			justify-content: center;
		}

		.cms_login_image {
			width: 60%;
			height: 100%;
		}

		.cms_login_from {
			width: 40%;
			height: 100%;
			background-color: white;
			border-radius: 10px;
			box-shadow: 0px 0px 10px #ccc;
		}

		/* .cms_login_container {
            width: 30%;
            height: 70%;
            border: 1px solid red;
        } */

		img {
			width: 100%;
			height: 100%;
		}

		.divBox {
			display: flex;
			justify-content: center;
			width: 80%;
			height: 46px;
			margin-top: 20px;
			margin-left: 10%;
			position: relative;
		}

		.cms_login_logo {
			display: flex;
			justify-content: center;
			width: 80%;
			height: 60px;
			/* border: 1px solid green; */
			margin-left: 10%;
			margin-bottom: 22px;
			margin-top: 25px;
		}

		.cms_login_img {
			width: 44px;
			height: 44px;
			position: absolute;
			top: 1px;
			left: 1px;
		}

		.cms_login_ipt {
			width: 100%;
			outline: none;
			padding-left: 50px;
		}

		.cms_login_ipt60 {
			width: 60%;
			outline: none;
			padding-left: 50px;
		}

		.cms_login_ver {
			width: 30%;
			outline: none;
			margin-left: 8%;
			border: 1px solid #c32c2c;
			background-color: #bd7070;
			line-height: 46px;
			letter-spacing: 4px;
			border-radius: 4px;
			cursor: default;
			color: white;
		}

		.margin_top60 {
			margin-top: 40px;
		}

		.login_btn {
			width: 100%;
			height: 60px;
			letter-spacing: 10px;
			font-size: 24px;
			background-color: green;
			border: none;
			outline: none;
			border-radius: 10px;
			color: white;
		}

		.login_btn:hover {
			background-color: #044468;
			border: none;
			outline: none;
		}
	</style>
</head>

<body>
<div class="cms_login">
	<div class="cms_login_container flexCenter" style="min-height:390px;">
		<div class="cms_login_image">
			 <img src="img/banner.jpg" alt="">
		</div>
		<div class="cms_login_from" style="min-width: 380px;">
			<form action="/orders/login" method="post" id="loginform">
				<div class="cms_login_logo"><span style="font-size:24px;">后台登录管理</span></div>
				<span></span>
				<div class="divBox"> <img class="cms_login_img" src="username_mark.png"> <input
						class="cms_login_ipt" type="text" placeholder="请输入账号" id="cms_login_username" name="username"></div>
				<div class="divBox"> <img class="cms_login_img" src="password_mark.png"><input type="password"
																							   placeholder="请输入密码" class="cms_login_ipt" id="cms_login_passward" name="password"></div>
				<div class="divBox"> <img class="cms_login_img" src="verify_mark.png"><input type="text"
																							 placeholder="请输入验证码" class="cms_login_ipt60" id="cms_login_ver_ipt">
					<span class="cms_login_ver" value="6666" id="cms_login_ver">6666</span>
				</div>
				<div class="divBox margin_top60" style="border:none;">
					<input class="login_btn" type="button" value="登录" name="submit">
				</div>
			</form>
		</div>
	</div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
	// 随机验证码
	var m = parseInt(Math.random(0, 9) * (9999 - 1000) + 1000);
	var n = $(".cms_login_ver").text(m)
	// 原生获取文本内容
	// var n = document.getElementsByClassName("cms_login_ver")[0].innerHTML;
	// console.log(n)
	// 点击按钮判断账户密码
	$(".login_btn").click(function () {
		var username = $("#cms_login_username").val();
		var password = $("#cms_login_passward").val();
		var ver = $("#cms_login_ver_ipt").val();
		var datas=$("#loginform").serialize();
		$.ajax({
		        url: "/orders/login",
				data: datas,
				type: "post",
				dataType: "json",
				success: function (rs) {
			if (rs.code == 900) {
				//    批量删除成功
				alert(rs.msg);
				location.href='/orders/findAll';
			}else {
			alert("用户名或密码错误!!")}
				}
		})

		// console.log(typeof username)
		// console.log(ver)
		// 判断用户账户是不是能够转换成number类型，能，是false，不是true
		// if (!isNaN(username)) {
		// 	// alert("用户账户长度" + username.length)
		// 	// 判断用户密码是不是能够转换成number类型，能，是false，不是true
		// 	if (!isNaN(password)) {
		// 		console.log("用户密码长度" + password.length)
		// 		// 判断用户输入得验证码
		// 		var n = $(".cms_login_ver").text()
		// 		// console.log(ver)
		// 		if (n == ver) {
		// 			alert("用户登录成功，等待跳转")
		// 		} else {
		// 			alert("用户验证码输入错误")
		// 		}
		// 	} else {
		// 		alert("用户密码输入错误")
		// 	}
		// } else {
		// 	alert("用户账号输入错误")
		// }
		// console.log(username)
	})

</script>

</body>
</html>